<script setup lang="ts">
//导入
import {type discussResultItem, getDiscuss} from "@/apis/discuss";
import {type BlogResult, getBlogContent} from "@/apis/home";
import MdEditor from "@/components/MdEditor.vue";
//ref、reactive、自定义变量
const currentPage = ref(1);
const pageSize = ref(10);
const dataTotal=ref(0);
const nowId = ref<undefined|number>(undefined);
const detailInfo = ref<BlogResult>({
  id: 0,
  blogContent: '',
  enable: true,
  createDate: '',
  updateDate: '0',
  blogTitle: '',
  editorType: 1,
});
const discussList = ref<discussResultItem[]>([])
const blogContent = ref('')
const mdEditorConfig = {
  height: '100%',
  typewriterMode:true
}
//hooks
// import router from "@/router";
const router = useRouter()
onMounted(()=> {
  // const id = router
  initData()
})
onActivated(()=> {
  initData()
})
function initData() {
  console.log(router.currentRoute.value)
  const {id} = router.currentRoute.value.query as unknown as {id:number}
  nowId.value = id;
  getDetailInfo(id)
}
//方法
function getDetailInfo(id:number):void {
  console.log(id)
  getBlogContent(id).then((res) => {
    console.log(res)
    detailInfo.value = res.data as BlogResult;
    blogContent.value = res.data.blogContent || '';
  })
  getDiscuss({
    id:id,
    page:currentPage.value,
    size:pageSize.value,
  }).then(res=>{
    console.log(res)
    discussList.value = res.data.list;
    dataTotal.value = res.data.total;
  })
}
function currentPageChange(val:number) {
  currentPage.value = val;
  getDetailInfo(nowId.value as number);
}
function pageSizeChange(val:number) {
  pageSize.value  = val;
  currentPage.value = 1
  getDetailInfo(nowId.value as number);
}
</script>

<template>
<div class="detail-container">
  <div class="detail-content-main" >
    <p class="fe-color-title">{{detailInfo.blogTitle}}</p>
    <MdEditor
        v-if="!!detailInfo.blogContent"
        v-model:model-value="detailInfo.blogContent"
        minHeight="300px"
        height="auto"
        :options="mdEditorConfig"
    ></MdEditor>
  </div>
<!--  <vs-pagination v-model:current-page="currentPage"-->
<!--                 shape="circle"-->
<!--                 :page-sizes="[10]"-->
<!--                 :layout="['prev','pager','next','jumper','total']"-->
<!--                 v-model:page-size="pageSize" progress :total="dataTotal"-->
<!--                 @update:page-size="pageSizeChange"-->
<!--                 @update:current-page="currentPageChange"-->
<!--  />-->
</div>
</template>

<style scoped lang="scss">
.detail-container{
  height: auto;
  width: 100%;
  min-height: 30vh;
  border-radius: 4px;
}
.detail-content-main{
  margin-bottom: 200px;
  position: relative;
}
</style>